<template>
  <div class="table-container">
    <view class="table-row">
      <view  class="table-header-cell-shen" style="flex: 0.18;" >神</view>
      <view class="table-header-cell" style="flex: 0.5;" v-if="fuYaoCellShow" >【伏卦】</view>
      <view class="table-header-cell" style="flex: 0.5;" >【主卦】{{zhuguaName}}</view>
      <view class="table-header-cell" style="flex: 0.5;" v-if="bianguaShow">【变卦】{{bianguaName}}</view>
    </view>
    
	<view  v-for="(item, index) in userArrArray" :key="index">
			<view class="table-row"  >
			  <!-- 神 -->
		      <view class="table-header-cell-shen"   style="flex: 0.18;" v-if="liuShen" >{{ liuShen[index] }}</view>
		      <!-- 伏卦 -->
			  <view class="table-cell" v-if="fuYaoCellShow" style="flex: 0.5;">
		        <span>{{ fuYao[index] }}</span>
		      </view>
 
			  <!-- 主卦 -->
		      <view class="table-cell" style="flex: 0.5;">
				<image :src="zhugua[index]"  mode="widthFix" style="width: 60px;"/>
		        <span>{{ zhuguaInfo[index] }}</span>
		        <span>{{ zhuganShiYing[index] }}</span>
		      </view>
			  <!-- 变卦-->
		      <view class="table-cell" v-if="bianguaShow"  style="flex: 0.5;">	 
				<image :src="biangua[index]"  mode="widthFix" style="width: 60px;"/>
		        <span >{{ bianguaInfo[index] }}</span>
		      </view>
		    </view>
			<view class="table-row" v-if="banFuYao[index]&&!fuYaoCellShow">
				 <!-- 神 -->
				 <view class="table-header-cell-shen"  v-if="liuShen" ></view>
				 <!-- 伏卦 -->
				 <view class="table-cell" v-else-if="fuYaoCellShow" ></view>
				 <!-- 主卦 -->
				 <view class="table-cell" style="color: red; white-space: normal; overflow: visible; text-align: left;">
				   伏神:{{ fuYao[index] }}
				 </view>
				 <!-- 变卦-->
				 <view class="table-cell" v-if="bianguaShow" style=""></view>	
			</view>
	</view>
  </div>
</template>

<script>
export default {
  props: {
	zhuguaName: {
		type: String,
		default: ''
	},
	bianguaName: {
		type: String,
		default: ''
	},  
    userArr: {
      type: String,
      default: '111111'
    },
    liuShen: {
      type: Array,
      default: () => []
    },
    fuYaoCellShow: {
      type: Boolean,
      default: false
    },
    banFuYao: {
      type: Array,
      default: () => []
    },
    fuYao: {
      type: Array,
      default: () => []
    },
    zhugua: {
      type: Array,
      default: () => []
    },
    zhuganDongYao: {
      type: Array,
      default: () => []
    },
    zhuguaInfo: {
      type: Array,
      default: () => []
    },
    zhuganShiYing: {
      type: Array,
      default: () => []
    },
    bianguaShow: {
      type: Boolean,
      default: false
    },
    biangua: {
      type: Array,
      default: () => []
    },
    bianguaInfo: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    userArrArray() {
      return this.userArr.split('').map(Number);
    }
  }
};
</script>

<style scoped>
.table-container {
  width: 100%;
}

.table-row {
  display: flex;
  align-items: center;
  /* border-bottom: 1px solid #ccc; */
  padding: 10px 0;
}
.table-header-cell-shen{
	  width: 80rpx !important;
	  font-weight: bold;
	  text-align: center;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  display: flex;
	  align-items: left;
	  justify-content: left;
}

.table-cell {

  margin-right: 10px;
  text-align: center;
  white-space: nowrap;
  overflow: auto; /* 或者使用 overflow: scroll; */
  text-overflow: ellipsis;
  display: flex;
  align-items: center;      
   /* max-width: 200px; */
}

.table-header-cell {
  flex: 1; /* 列宽根据内容自适应 */
  margin-right: 5px;
  /* 抬头列的样式，例如加粗等 */
  font-weight: bold;
  text-align: left;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
  display: flex; /* 使用 flex 布局 */
  align-items: left; /* 垂直居中对齐 */
}
.table-cell::-webkit-scrollbar {
  width: 5px; /* 设置滚动条宽度 */
}

.table-cell::-webkit-scrollbar-thumb {
  border-radius: 5px; /* 设置滚动条圆角 */
}

.table-cell::-webkit-scrollbar-track {
}

.red-text {
  color: red;
}

.child-view-info {
  font-size: 12px;
  color: #666;
}

/* 偶数行添加灰色背景 */
.table-row:nth-child(even) {
  background-color: #f2f2f2;
}
</style>
